這篇分享如何在網頁上使用lottie。

開始使用Lottie

• 將想使用的json檔案放進專案裡

• 安裝腳本
  可以在HTML靜態的引入腳本：
  lottie-web

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js"></script>

也可以使用npm安裝：

npm install lottie-web

• 開始使用
  在HTML創建想要放json檔的標籤，並將json檔位置放入
  官方教程
  HTML檔：

<div id='lottie'> </div>
<script src=data.json></script>

之後創建一個js檔，輸入以下程式碼
JS檔：

var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
})

正確使用的話，動畫應該可以播放於網頁上了。

總結

下一篇放lottie的參數教學。